<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="dom"></div>
  <script src="../js/mustache.js"></script>
  <script type="text/template" id="temp">
    <div>
      <h1>1、mustache基础使用</h1>
      <p>{{name}}</p>
      <h1>2、渲染标签</h1>
      <p>{{company}}</p>
      <p>{{{company}}}</p>
      <p>{{&company}}</p>
      <h1>3、渲染逻辑结果</h1>
      <p>这里是一个计算得到的数字:{{calc}}</p>
      <h1>4、循环遍历</h1>
      <ul>
        {{#list}}
          <li>{{name}}-{{age}}岁了</li>
        {{/list}}
      </ul>
      <h1>5、函数调用this使用及参数</h1>
      <ul>
        <b>this</b>
        {{#list}}
          <p>{{allName}}</p>
        {{/list}}
      </ul>
      <ul>
        <b>参数</b>
        {{#list}}
          {{#bold}}
            <p>Hi,{{name}}</p>
          {{/bold}}
        {{/list}}
      </ul>
      <h1>6、if判断</h1>
      {{#show}}
        <p>此时show为{{show}}</p>
      {{/show}}
      {{^show}}
        <p>此时show为{{show}}</p>
      {{/show}}
    </div>
  </script>
  <script>
    var dom = document.getElementById('dom')
    var template = document.getElementById('temp').innerHTML
    var data = {
      name: 'Jack',
      company: '<b>GitHub</b>',
      calc: function () {
        return 2 + 3
      },
      index: 0,
      list: [
        { name: '张三', lastName: '姓名', age: 14 },
        { name: '李四', lastName: '姓名', age: 15 },
      ],
      allName: function () {
        return this.lastName + this.name
      },
      name1: {
        first: "Michael",
        last: "Jackson"
      },
      bold: function () {
        return function (text, render) {
          return '<b>' + render(text) + '</b>'
        }
      },
      show: false
    }
    var MDom = Mustache.render(template, data)
    dom.innerHTML = MDom
  </script>
</body>

</html>